<template>
  <div id="poster">
    <el-form
      class="login-container"
      status-icon
      :model="loginForm"
      ref="loginForm"
      label-position="left"
      label-width="0px"
      :rules="rules"
      style="text-align: left"
    >
      <h3 class="login_title">系统登录</h3>
      <el-form-item prop="mobile">
        <el-input
          type="text"
          v-model="loginForm.mobile"
          auto-complete="off"
          placeholder="账号"
          prefix-icon="el-icon-user"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          type="password"
          v-model="loginForm.password"
          auto-complete="off"
          placeholder="密码"
          prefix-icon="el-icon-lock"
        ></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input
          v-model="loginForm.code"
          auto-complete="off"
          placeholder="验证码"
          style="width: 63%"
          prefix-icon="el-icon-circle-check"
          @keyup.enter.native="login"
        >
        </el-input>
        <div class="login-code" ref="codes">
          <el-button :type="type" :disabled="disable" @click="changeStatus">
            {{ codeText }}</el-button
          >
        </div>
      </el-form-item>
      <el-checkbox
        v-model="loginForm.rememberMe"
        style="margin: 0px 0px 25px 0px"
        >记住密码</el-checkbox
      >
      <el-form-item style="width: 100%">
        <el-button
          type="primary"
          style="width: 100%; background: #505458; border: none"
          @click="login"
          @keyup.enter.native="login"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    var checkCode = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入验证码"));
      }
          callback();     
    };
    var validateName = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入手机号码"));
      }
      var mPattern = /^1[34578]\d{9}$/;
      if (!mPattern.test(value)) {
        callback(new Error("请输入正确的中国大陆手机号码"));
      } else {
        this.disable = false;
        this.type = "success";
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        mobile: "",
        password: "",
        code: "",
        rememberMe: true,
      },
      rules: {
        mobile: [
          {
            validator: validateName,
            trigger: "blur",
          },
        ],
        password: [
          {
            validator: validatePass,
            trigger: "blur",
          },
        ],
        code: [
          {
            validator: checkCode,
            trigger: "blur",
          },
        ],
      },
      codeContent: "",
      codeUrl: "",
      isExist: false,
      responseResult: [],
      disable: true,
      codeText: "获取验证码",
      type: "info",
    };
  },
  methods: {
    changeStatus() {
      var time = 9;
      this.$axios
        .get("/sendsms?mobile=" + this.loginForm.mobile)
        .then((res) => {
          this.$message({
            type: res.data.success ? "success" : "error",
            message: res.data.message,
          });
        })
        .catch();
      var timeout = setInterval(() => {
        if (time > 0) {
          this.codeText = time + "S后重新获取";
          time--;
        } else {
          this.codeText = "获取验证码";
          clearInterval(timeout);
        }
      }, 1000);
    },
    login() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.$axios
            .post("/login", {
              mobile: this.loginForm.mobile,
              password: this.loginForm.password,
              code: this.loginForm.code,
            })
            .then((res) => {
              this.$message({
                type: res.data.success ? "success" : "error",
                message: res.data.message,
              });
              if (res.data.success) {
                window.sessionStorage.setItem("sessionId",res.data.data)
                this.$cookies.set("session",res.data.data)
                this.$router.push({
                  path: "/index",
                });
              }
            })
            .catch((failResponse) => {
              
            });
        }
      });
    },
  },
};
</script>
<style>
#poster {
  background: url("../assets/bg.jpg") no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}

body {
  margin: 0px;
}

.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}

.login-code {
  width: 33%;
  height: 38px;
  float: right;
}

.login-code-img {
  height: 38px;
  width: 100%;
}
.sendBtn {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: antiquewhite;
}
</style>
